<template>
    <div class="location-view">
      <el-card class="card" shadow="hover">
        <div class="card-header">
          <el-button
            :type="activeTab === 'location' ? 'primary': 'default'"
            @click="switchTab('location')"
          >
            党建地点
          </el-button>
          <el-button
            :type="activeTab === 'reservations' ? 'primary': 'default'"
            @click="switchTab('reservations')"
          >
            我的预约
          </el-button>
        </div>
        <div class="card-body">
          <component :is="activeComponent" :locations="locations" />
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { LocationListService } from '@/api/location.js';
  import MainLocation from '@/components/Location/MainLocation.vue';
  import MyReservations from '@/components/Location/MyReservations.vue';
  
  // 状态管理
  const locations = ref([]); // 存储地点信息
  const activeTab = ref('location'); // 当前选中的标签
  const activeComponent = ref(MainLocation); // 设置默认组件
  
  const switchTab = (tab) => {
    activeTab.value = tab;
  
    // 根据选中的标签切换组件
    if (tab === 'location') {
      activeComponent.value = MainLocation;
    } else {
      activeComponent.value = MyReservations;
    }
  };
  
  // 获取地点数据并在控制台输出
  const getLocationData = async () => {
    try {
      const response = await LocationListService({ page: 1, size: 10 }); // 获取前10个地点
      locations.value = response.data.list || []; // 根据数据格式，获取 `list` 数组
      console.log('Fetched locations:', locations.value); // 输出获取到的数据
    } catch (error) {
      console.error('Failed to fetch locations:', error);
    }
  };
  
  // 组件挂载时获取数据
  onMounted(() => {
    getLocationData();
  });
  </script>
  
  <style scoped>
  .location-view {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 视口高度 */
  }
  
  .card {
    width: 70%; /* 卡片宽度占70% */
    border-radius: 10px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出 */
  }
  
  .card-header {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-around; /* 均匀分配按钮 */
    padding: 10px 20px; /* 内边距 */
  }
  
  .card-body {
    padding: 20px; /* 内边距 */
  }
  </style>
  